<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>光标跟随效果</title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <style>
      @keyframes blink {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }

      .cursor {
        background-color: aqua;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 20px;
        width: 2px;
        animation: blink 1s infinite;
      }
      .text-container {
        height: 300px;
        width: 500px;
        margin: 10px auto;
        position: relative;
        border: 1px dashed gray;
        color: #fff;
      }
      .text {
        position: relative;
        inset: 0;
        color: inherit;
      }
    </style>
  </head>
  <body>
    <div class="text-container">
      <div class="text">
        <p>xxxx</p>
        <a>222</a>
      </div>
      <div class="cursor"></div>
    </div>
    <script>
      const textContainer = document.querySelector(".text-container");
      const textElem = document.querySelector(".text");
      const cursor = document.querySelector(".cursor");
      async function autoAppend() {
        function delay(duration) {
          return new Promise((resolve) => setTimeout(resolve, duration));
        }
        function transfer(text) {
          return `<p>${text}</p>`;
        }
        const content =
          "音频和视频  文件的元 数据可能包含一些 信息，如标题、艺术家、专朝等。然而样的创建时间通常是由文件系统处理。";
        for (let i = 0; i < content.length; i++) {
          let text = content.slice(0, i);
          let result = transfer(text);
          console.log("result", result);
          textElem.innerHTML = result;
          updateCursor();
          await delay(380);
        }
      }
      autoAppend();
      function getLastTextNode(node) {
        let nodeType = node?.nodeType;
        // if (node) {
        const Node = {
          TEXT_NODE: 3,
        };
        if (nodeType === Node.TEXT_NODE) {
          return node;
        }
        let children = node.childNodes;
        console.log("children", children);
        for (let i = children.length - 1; i >= 0; i--) {
          let result = getLastTextNode(children[i]);
          if (result) {
            return result;
          }
        }
        // }
        return null;
      }

      function updateCursor() {
        // 找到最后一个文本节点
        const lastTextNode = getLastTextNode(textElem);
        console.log(lastTextNode);
        // 加文字
        const tempText = document.createTextNode("|");
        if (lastTextNode) {
          lastTextNode.parentNode.appendChild(tempText);
        } else {
          textElem.appendChild(tempText);
        }
        // 根据文字位置设置光标位置
        const range = document.createRange();
        range.setStart(tempText, 0);
        range.setEnd(tempText, 0);
        const rect = range.getBoundingClientRect(); //绝对定位
        const textRect = textContainer.getBoundingClientRect();
        const x = rect.left - textRect.left;
        const y = rect.top - textRect.top;
        cursor.style.transform = `translate(${x}px,${y}px)`;
        // 删文字
        tempText.remove();
      }
    </script>
  </body>
</html>
